<template>
	<view>
		<!-- --------------顶部导航栏------------------ -->
		<view class="example-body">
			<uni-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="showCity" @clickRight="scan">
				<block slot="left">
					<view class="city">
						<view><text class="uni-nav-bar-text">{{ city }}</text></view>
						<uni-icons type="arrowdown" color="#333333" size="22" />
					</view>
				</block>
				
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="点击搜索影院" @click="goSearch" @confirm="confirm">
				</view>
				<!-- <uni-nav-bar title="标题" @clickLeft="back" /> -->
			</uni-nav-bar>
		</view>
		<!-- --------------轮播图------------------ -->
		<view class="uni-margin-wrap">
			<swiper  
				indicator-dots="true"
				indicator-active-color="#FFFFFF"
				autoplay="true"
				circular="true"
				class="margin-wrap"
				>
				<swiper-item v-for="(item, index) in imgs" :key="index">
					<image class="swiper-item-image" :src="item.url" mode="aspectFill"/>
				</swiper-item>
			</swiper>		
		</view>
		<!-- --------------标签------------------ -->
		<view class="item-outter">
			<view class="item-inner">品牌</view>
			<view class="item-inner">优势</view>
			<view class="item-inner">标签</view>
		</view>
		<!-- --------------影院------------------ -->
		<view>
			<view @click="goCinema(cinema)" class="cinema_outter" v-for="(cinema, idx) in cinemas" :key="idx">
				<view class="cinema_name">{{cinema.movieTheatreName}}</view>
				<view>{{cinema.movieTheatreAddress}}</view>
				<view class="cinema_way">{{cinema.contactWay}}</view>
				<view class="cinema_serve" v-for="(serve,idex) in cinema.serves" :key="idex">
					<text class="cinema_serve_name">
						{{serve.serve_name}} ：
					</text>
					<text>
						{{serve.serve_content}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// console.log(uni.getSystemInfoSync());
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	
	export default {
		
		components: {
			uniIcons,
			uniNavBar,
			uniSection,
		},
		data() {
			return {
				/* --------------影院相关数据------------------ */
				cinemas:[],
					
				/* --------------顶部导航栏相关数据------------------ */
				city: '重庆',
				
				/* --------------轮播图相关数据------------------ */
				imgs:[
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					},
				]
			}
		},
		onLoad() {
			var a = this
			uni.request({
			    url: '/api/cinema/getAllCinema', 
			    success: function (res) {
			        // console.log(res.data);
					for(let i=0; i<res.data.length; i++){
						a.cinemas.push(res.data[i]);
					}
					console.log(a.cinemas)
			    }
			});
		},
		methods: {
			/* --------------影院相关方法------------------ */
			goCinema(cinema){
				uni.setStorage({
				    key: 'currentCinema',
				    data: cinema,
				    success: function () {
				        console.log('success');
				    }
				});
				/* console.log(cinema)
				console.log(cinema.id)
				console.log(cinema.movieTheatreName)
				console.log(cinema.movieTheatreAddress)
				console.log("---------------------") */
				uni.navigateTo({
					url:"cinema_detail",
				})
			},
			
			/* --------------顶部导航栏相关方法------------------ */
			clickLeft() {

				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {

				uni.showToast({
					title: '选择城市'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			},
			goSearch(){
				uni.navigateTo({
					url:"./search_cinema"
				})
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style>
	/* --------------影院相关样式------------------ */
	.cinema_outter{
		border-bottom: 1px solid #EEEEEE;
		margin: 10px;
	}
	.cinema_name{
		font-size: 18px;
		font-weight: bold;
	}
	.cinema_way{
		color: #DD524D;
		font-weight: bold;
	}
	.cinema_serve{
		font-size: 12px;
		color:#888888;
	}
	.cinema_serve_name{
		font-weight: bold;
		color:#F0AD4E;
	}
	
	
	/* --------------标题栏相关样式------------------ */
	.flex-item {
		width: 33.3%;
		height: 50rpx;
		text-align: center;
		line-height: 200rpx;
	}
	.item-outter{
		width: 100%;
		height: 40px;
		border-bottom:1px solid #EEEEEE;
		/* background-color:#CCCCCC; */
	}
	.item-inner{
		width: 33.3%;
		height: 40px;
		border: 1px solid #EEEEEE;
		float: left;
		box-sizing: border-box;
		text-align: center;
		line-height: 40px;
	}
	
	/* --------------轮播图相关样式------------------ */
/* 	.margin-wrap{
		height: 80px;
	} */
	.swiper-item-image{
		height: 100%;
		width: 100%;
	}
	
	/* --------------顶部导航栏相关样式------------------ */
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		/* background-color: #efeff4; */
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.uni-nav-bar-text {
		font-size: 28rpx;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		/* width: 160rpx;
 */
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		/* width: 500rpx;
 */
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-uni-icon {
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 28rpx;
		background-color: #f8f8f8;
	}

	.example-body {
		padding: 0;
	}
</style>